<template>
  <div class="dataStatistics">
    <!-- <header-bar
      v-if="!$route.meta.hideHeader"
      ref="header"
      :title="$route.meta.title"
    >
      <template v-if="$store.state.user.show">
        <svg-icon icon-class="change" class="add" @click.native="changeLocation" />
      </template>
    </header-bar> -->
    <div class="content">
      <div class="card">
        <div class="cardbox">
          <div class="cardtitle">隔离人员始发地</div>
          <div
            ref="chartLine4"
            class="cardEcharts"
          />
        </div>
        <div class="cardbox">
          <div class="cardtitle1">隔离类型</div>
          <div
            ref="chartLine3"
            class="cardEcharts1"
          />
        </div>
      </div>
      <div class="echBox">
        <div class="echBoxTitle">隔离总人数与新增统计</div>
        <div
          ref="chartLine1"
          class="rightEchar"
        />
        <div class="echBoxTitle1">解除隔离统计情况</div>
        <div
          ref="chartLine2"
          class="rightEchar"
        />
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'

import { Toast, Dialog, Icon, List } from 'vant'
Vue.use(Toast).use(Dialog).use(Icon).use(List)
import $api from '@/api/index'
import dd from 'gdt-jsapi'
import { mapGetters } from 'vuex'
export default {
  name: 'DataStatistics',
  beforeRouteLeave(to, from, next) { // 离开页面之前将高度存储到sessionStorage。这里不建议用localStorage，因为session在关闭浏览器时会自动清除，而local则需要手动清除，有点麻烦。
    sessionStorage.setItem('scrollH', document.getElementById('content').scrollTop)
    next()
  },
  data() {
    return {
      reportIds: 'code',
      countData: '', // 隔离总人数
      NewAddData: '', // 新增统计情况
      FromAreaData: [], // 隔离人员始发地统计√
      ByTypeData: [], // 隔离类型统计√
      DetailData: ''// 解除隔离统计情况
    }
  },
  beforeCreate() {
    this.$dd.showTitleBar()
    this.$dd.setTitle({
      title: '数据分析'
    })
  },
  mounted() {
    this.getEachart4()
    $api.user.countSituationByFromArea({ reportIds: this.reportIds }).then(res => {
      this.FromAreaData = res.data
      this.drawLine4()
    })

    this.getEachart3()
    $api.user.countSituationByType({ reportIds: this.reportIds }).then(res => {
      this.ByTypeData = res.data
      this.drawLine3()
    })

    // 新增统计情况
    this.getEachart1()
    $api.user.countSituationNewAdd({ reportIds: this.reportIds }).then(res => {
      this.NewAddData = res.data
    })
    // 隔离总人数
    $api.user.countIsolate({ reportIds: this.reportIds }).then(res => {
      this.countData = res.data
    })
    // 解除隔离统计情况
    this.getEachart2()
    $api.user.queryQuarantineDetail({ reportIds: this.reportIds }).then(res => {
      this.DetailData = res.data
    })
  },
  computed: {
    ...mapGetters([
      'reportId'
    ])
  },
  methods: {
    getEachart4() {
      $api.user.countSituationByFromArea({ reportIds: this.reportIds }).then(res => {
        this.FromAreaData = res.data
        this.drawLine4(this.FromAreaData)
      })
    },
    getEachart3() {
      $api.user.countSituationByType({ reportIds: this.reportIds }).then(res => {
        this.ByTypeData = res.data
        this.drawLine3(this.ByTypeData)
      })
    },
    getEachart1() {
      $api.user.countSituationNewAdd({ reportIds: this.reportIds }).then(res => {
        this.NewAddData = res.data
      })
      $api.user.countIsolate({ reportIds: this.reportIds }).then(res => {
        this.countData = res.data
        this.drawLine1([this.NewAddData, this.countData])
      })
    },
    getEachart2() {
      $api.user.queryQuarantineDetail({ reportIds: this.reportIds }).then(res => {
        this.DetailData = res.data
        this.drawLine2(this.DetailData)
      })
    },
    drawLine1(val) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(this.$refs.chartLine1)
      const arr = []
      for (var i = 0; i < val.length; i++) {
        arr.push(val[i])
      }
      var option = {
        xAxis: {
          type: 'category',
          data: ['"隔离总人数', '新增统计']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: arr,
          type: 'bar',
          barWidth: 30,
          barCategoryGap: '20%'
        }]
      }
      myChart.setOption(option, true)
      // 解决自适应
      setTimeout(function() {
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      }, 500)
    },
    drawLine2(val) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(this.$refs.chartLine2)
      console.log(val)
      const arr = []
      arr.push(val.quarantineEnd, val.quarantineRuning)
      var option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '解除隔离统计情况',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20px',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: arr
          }
        ]
      }
      myChart.setOption(option, true)
      // 解决自适应
      setTimeout(function() {
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      }, 500)
    },
    drawLine3(val) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(this.$refs.chartLine3)
      const arr = []
      for (var i = 0; i < val.length; i++) {
        arr.push({ name: val[i].quarantReason, value: val[i].count })
      }
      var option = {
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: arr,
            emphasis: {
              itemStyle: {
                shadowBlur: 5,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart.setOption(option, true)
      // 解决自适应
      setTimeout(function() {
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      }, 500)
    },
    drawLine4(val) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(this.$refs.chartLine4)
      console.log(val.length)
      const arr = []
      for (var i = 0; i < val.length; i++) {
        arr.push({ name: val[i].fromArea, value: val[i].count })
      }
      var option = {
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          position: ['50%', '50%']
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: arr,
            emphasis: {
              itemStyle: {
                shadowBlur: 5,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart.setOption(option, true)
      // 解决自适应
      setTimeout(function() {
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.dataStatistics {
  width: 100%;
  height: 100%;
  .content {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    margin-top: 10px;
    font-family: PingFangSC-Regular, PingFang SC;
    background-color: #fff;
    padding: 0 20px;
    box-sizing: border-box;
    .dataStatistics_title {
      width: 100%;
      height: 100px;
      line-height: 100px;
      text-align: center;
      font-size: 38px;
      border-bottom: 2px solid rgba(180, 168, 168, 0.747);
    }
    .card {
      width: 100%;
      height: 300px;
      display: flex;
      .cardbox {
        width: 50%;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .cardtitle {
          width: 260px;
          box-sizing: border-box;
          padding: 10px;
          background-color: rgb(255, 196, 242);
          border-radius: 20px;
          text-align: center;
        }
        .cardEcharts {
          width: 260px;
          height: 500px;
        }
        .cardtitle1 {
          width: 200px;
          box-sizing: border-box;
          padding: 10px;
          background-color: rgb(255, 196, 242);
          border-radius: 20px;
          text-align: center;
        }
        .cardEcharts1 {
          width: 260px;
          height: 500px;
        }
      }
    }
    .echBox {
      width: 100%;
      margin: auto;
      .echBoxTitle {
        width: 350px;
        box-sizing: border-box;
        background-color: rgb(255, 196, 242);
        line-height: 50px;
        border-radius: 20px;
        padding: 5px 10px;
        text-align: center;
      }
      .echBoxTitle1 {
        width: 290px;
        box-sizing: border-box;
        background-color: rgb(255, 196, 242);
        line-height: 50px;
        border-radius: 20px;
        padding: 5px 10px;
        text-align: center;
      }
      .rightEchar {
        width: 100%;
        height: 500px;
        border-bottom: 2px solid #f4f4f5;
      }
    }
  }
}
</style>
